<template>
  <div class="admin-management">
    <div class="header">
      <h1>管理员管理</h1>
      <button class="btn btn-primary" @click="openAdminForm(null)">添加管理员</button>
    </div>

    <div class="card">
      <div class="search-bar">
        <input type="text" v-model="adminSearch" placeholder="搜索管理员..." style="flex:1">
        <button class="btn btn-primary" @click="searchAdmins">搜索</button>
      </div>

      <div class="table-container">
        <table>
          <thead>
          <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>姓名</th>
            <th>角色</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="admin in filteredAdmins" :key="admin.id">
            <td>{{ admin.id }}</td>
            <td>{{ admin.username }}</td>
            <td>{{ admin.name }}</td>
            <td>{{ admin.role }}</td>
            <td class="action-buttons">
              <button class="btn btn-success" @click="openAdminForm(admin)">编辑</button>
              <button class="btn btn-danger" @click="deleteAdmin(admin.id)">删除</button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 管理员表单弹窗 -->
    <div v-if="showAdminForm" class="modal">
      <div class="modal-content">
        <span class="close" @click="showAdminForm = false">&times;</span>
        <h2>{{ currentAdmin.id ? '编辑管理员' : '添加管理员' }}</h2>

        <div class="form-group">
          <label>用户名</label>
          <input type="text" v-model="currentAdmin.username">
        </div>

        <div class="form-group">
          <label>密码</label>
          <input type="password" v-model="currentAdmin.password">
        </div>

        <div class="form-group">
          <label>确认密码</label>
          <input type="password" v-model="currentAdmin.confirmPassword">
        </div>

        <div class="form-group">
          <label>姓名</label>
          <input type="text" v-model="currentAdmin.name">
        </div>

        <div class="form-group">
          <label>角色</label>
          <select v-model="currentAdmin.role">
            <option value="admin">管理员</option>
            <option value="manager">图书管理员</option>
          </select>
        </div>

        <button class="btn btn-primary" @click="saveAdmin">保存</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import AdminService from '@/services/admin'

export default {
  setup() {
    const admins = ref([])
    const adminSearch = ref('')
    const showAdminForm = ref(false)
    const currentAdmin = ref({
      id: null,
      username: '',
      password: '',
      confirmPassword: '',
      name: '',
      role: 'manager'
    })

    const loadAdmins = async () => {
      try {
        // 模拟数据
        admins.value = [
          {id: 1, username: 'admin', name: '系统管理员', role: 'admin'},
          {id: 2, username: 'manager1', name: '图书管理员1', role: 'manager'},
          {id: 3, username: 'manager2', name: '图书管理员2', role: 'manager'}
        ]
      } catch (error) {
        console.error('获取管理员列表失败:', error)
      }
    }

    onMounted(loadAdmins)

    const filteredAdmins = computed(() => {
      if (!adminSearch.value) return admins.value

      const searchTerm = adminSearch.value.toLowerCase()
      return admins.value.filter(admin =>
          admin.name.toLowerCase().includes(searchTerm) ||
          admin.username.toLowerCase().includes(searchTerm))
    })

    const openAdminForm = (admin) => {
      if (admin) {
        currentAdmin.value = { ...admin, password: '', confirmPassword: '' }
      } else {
        currentAdmin.value = {
          id: null,
          username: '',
          password: '',
          confirmPassword: '',
          name: '',
          role: 'manager'
        }
      }
      showAdminForm.value = true
    }

    const saveAdmin = async () => {
      try {
        if (currentAdmin.value.password !== currentAdmin.value.confirmPassword) {
          alert('两次输入的密码不一致！')
          return
        }

        if (currentAdmin.value.id) {
          // 更新管理员
          await AdminService.updateAdmin(currentAdmin.value)
        } else {
          // 添加管理员
          await AdminService.addAdmin(currentAdmin.value)
        }
        showAdminForm.value = false
        loadAdmins()
      } catch (error) {
        console.error('保存管理员失败:', error)
      }
    }

    const deleteAdmin = async (id) => {
      if (confirm('确定要删除这位管理员吗？')) {
        try {
          await AdminService.deleteAdmin(id)
          loadAdmins()
        } catch (error) {
          console.error('删除管理员失败:', error)
        }
      }
    }

    const searchAdmins = () => {
      // 搜索逻辑已在计算属性中实现
    }

    return {
      admins,
      adminSearch,
      filteredAdmins,
      showAdminForm,
      currentAdmin,
      openAdminForm,
      saveAdmin,
      deleteAdmin,
      searchAdmins
    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
</style>